<template>
    <div class="BindingPhone">
          <headerTou :isfanhui=true :border=true title="全年口腔保健消费卡"></headerTou>
                  <div class="hederDetails">
            <div><span >全部</span></div>
            <div><span class="borderbottom" @click="tiaozhuan">使用记录</span></div>
            <div><span>未使用</span></div>
        </div>
            <div class="neirong">
              <carxinxi :data=data></carxinxi>
        </div>
    </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import carxinxi from "./zujian/carxinxi.vue"
export default {
  data() {
    return {
      data:{
        img:require('../img/Rectangle@2x.png'),
        DetailsName:'易趣玩',
        phone:'12689549632',
        Detailsdate:'2018-01-01',
        qianshu:'-12.00'
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    tiaozhuan:function(){
        
    }
  },
  components: {
    headerTou,
    carxinxi
  }
};
</script>
<style lang="scss" scoped>
.BindingPhone {
  height: 100%;
  background: #e5e5e5;
  .hederDetails {
    background: #ffffff;
    height: 90px;
    width: 750px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e5e5;
    div {
      width: 250px;
      height: 90px;
      text-align: center;
      line-height: 90px;
      span {
        height: 88px;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #333333;
        border-bottom: 2px solid transparent;
      }
      .borderbottom {
        border-bottom: 4px solid #e97a36;
        color: #e97a36;
      }
    }
  }
  .neirong {
  
  }
}
</style>


